<template>
    <div ref="container" class="render-container">
        <canvas class="render" ref="canvas"></canvas>
    </div>
</template>
<script lang="ts">
  import { render } from './Render';
  import { SceneConfig } from '../../components/scenes/BaseScene';
  import { ComRefs, Data } from '../basic/types';
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'render',
    data(): Data {
      return {
        ctx: null,
      };
    },
    mounted() {
      const { canvas, container } = this.$refs as ComRefs;
      const config: SceneConfig = {
        width: container.clientWidth,
        height: container.clientHeight,
        canvas: canvas,
      };
      this.ctx = render(config);
      window.addEventListener('resize', this.reSize);
    },
    methods: {
      reSize() {
        const { container } = this.$refs as ComRefs;
        this.ctx?.resetSize(container.clientWidth, container.clientHeight);
      },
    },
    unmounted() {
      window.removeEventListener('resize', this.reSize);
    },
  });
</script>
<style lang="scss" scoped>
    .render-container {
        position: relative;
    }
</style>
